<template>
  <div class="page-gird-container">
    <i-crud
      :columns="columns"
      :data="data"
      :page-options="pageOptions"
      :fetch-data="fetchData"
      :options="options"
      :add-form-options="addFormOptions"
      :searchOptions="searchOptions"
    ></i-crud>
  </div>
</template>

<script>
    import { proxyIpGet } from "@/api/business";
    import { mapState } from 'vuex';
    import appMixins from "@/mixins/app";

    export default {
        name: "business-ip",
        mixins: [appMixins],
        computed: {
            ...mapState("admin/icrud_dict", ["whetherDict"]),
            ...mapState("admin/business_dict", ["agencyIpStatus"]),
            columns() {
                return [
                    {
                        title: '链接地址',
                        key: 'url',
                        width: 250
                    },
                    {
                        title: '账号',
                        key: 'username',
                        type: "Input",
                        width: 0
                    },
                    {
                        title: '密码',
                        key: 'password',
                        width: 0
                    },
                    {
                        title: '订单号',
                        key: 'ordernum',
                        type: "Input",
                        width: 200
                    },
                    {
                        title: '节点IP',
                        key: 'ip',
                        width: 0
                    },
                    {
                        title: '到期时间',
                        key: 'expiration',
                        componentName: "DatePicker",
                        sortable: true,
                        search:{
                            component: {
                                name: 'DatePicker',
                                type: 'daterange',
                            }
                        },
                        width: 180,
                        render: (h, params) => {
                            var date = new Date(params.row.expiration * 1000);
                            var Y = date.getFullYear() + '-';
                            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                            var D = date.getDate() + ' ';
                            var H = date.getHours() + ':';
                            var m = date.getMinutes() < 10 ? '0'+date.getMinutes() + ':' : date.getMinutes() + ':';
                            var s = date.getSeconds();
                            return Y+M+D+H+m+s
                        }
                    },
                    {
                        title: '是否自动续费',
                        key: 'autoRenew',
                        componentName: "Select",
                        dict: {
                            data: this.whetherDict,
                        },
                        width: 0
                    },
                    {
                        title: '项目名称',
                        key: 'projectName',
                        width: 250
                    },
                    {
                        title: '地区名称',
                        key: 'nodeName',
                        width: 0
                    },
                    {
                        title: "状态",
                        key: "status",
                        componentName: "Select",
                        dict: {
                            data: this.agencyIpStatus,
                        },
                        width: 0
                    },
                ]
            } 
        },
        data() {
            return {
                pageOptions: {
                    total: 0,
                    pageSize: 20,
                    pageSizeOpts: [20, 50, 100, 200]
                },
                data: [],
                addFormOptions: {
                    show: false,
                },
                options: {
                    border: false, // 是否显示边框
                },
                searchOptions: {
                    labelWidth: 150, 
                },
            };
        },
        methods: {
            fetchData({ currentPage, pageSize, sortColumn, sortType, search }) {
                return new Promise((resolve, reject) => {
                    const params = {
                        page: {
                            current: currentPage,
                            size: pageSize,
                        },
                        search,
                    };
                    if (search.date && search.date[0] !== "") {
                        search.date[0] = this.toDate(search.date[0]);
                        search.date[1] = this.toDate(search.date[1]);
                    }
                    if (sortColumn) {
                        params["sort"] = {
                            type: sortType,
                            column: sortColumn,
                        };
                    }
                    proxyIpGet(params)
                        .then((res) => {
                            this.data = res.list;
                            this.pageOptions.total = res.total;
                            resolve();
                        })
                        .catch((err) => {
                            reject(new Error(err));
                        });
                });
            },
        },
    };
</script>

<style lang="less" scoped>
.page-gird-container {
  box-shadow: rgba(10, 32, 51, 0.12) 0px 1px 3px 0px;
  padding: 24px;
  box-sizing: border-box;
  background-color: #fff;
  .bg-color-body-gray {
    background-color: #f3f4f5;
    padding: 16px 16px 0;
    margin-bottom: 24px;
  }
}
.ivu-form-item {
  display: flex;
}
.cursign {
  cursor: pointer;
  color: #08f;
}
</style>
